<template>
    <el-card class="login"  shadow="hover">
        <div slot="header" class="title">登录</div>

        <el-form
            label-width="0"
            :model="formLabelAlign"
            ref="ruleForm"
            :rules="rules"
            size="small"
        >
            <el-form-item prop="email" :error="formErr.emailErr">
                <el-input
                        v-model="formLabelAlign.email"
                        placeholder="请输入邮箱"
                ></el-input>
            </el-form-item>

            <el-form-item prop="password" :error="formErr.userErr">
                <el-input
                    v-model="formLabelAlign.password"
                    placeholder="请输入密码"
                    minlength="3"
                    maxlength="20"
                    type="password"
                ></el-input>
            </el-form-item>
            <el-form-item prop="image_text" :error="formErr.codeErr" >
                <el-input
                    v-model="formLabelAlign.image_text"
                    placeholder="验证码"
                    minlength="4"
                    maxlength="4"
                    @keyup.enter.native="login"
                    size="small"
                >
                    <img
                        slot="append"
                        :src="'data:image/jpg;base64,'+code_image"
                        alt="图片验证码"
                        class="code_image"
                        @click="getImgCode"
                    />
                </el-input>
            </el-form-item>

            <el-form-item style="text-align: center;margin-top: 20px;">
                <el-button type="primary" style="width: 100%;" @click="login">立即登陆</el-button>
            </el-form-item>
        </el-form>

        <div class="footer flex-row ite-c jus-e">
            <router-link class="go flex-row ite-c jus-e" to="/reg">
                <span>前往注册</span>
                <i class="el-icon-right"></i>
            </router-link>
        </div>
    </el-card>
</template>

<script>
    import {imageCode} from '@/api/user'
    import {loginRules} from '@forms/user'

    let formUrl = ''

    export default {
        name: "login",
        beforeRouteEnter(to,form,next){
            formUrl = form.fullPath
            next()
        },
        data() {
            return {
                formLabelAlign: {
                    email: '',
                    password: '',
                    image_text: '',
                },
                image_uuid: '',
                code_image: '',
                rules: loginRules,
                formErr:{
                    userErr: '',
                    codeErr: '',
                    emailErr: '',
                },
                formUrl,
            }
        },
        mounted() {
            this.getImgCode()
        },
        methods: {
            // 获取图片验证码
            getImgCode() {
                imageCode()
                    .then(res => {
                        if (Number(res.code) === 0) {
                            this.image_uuid = res.data.image_uuid
                            this.code_image = res.data.image
                        } else {
                            this.$Alert({message: res.msg, type: 'error'})
                        }
                    })
            },
            // 登陆
            login() {
                this.$refs.ruleForm.validate((valid) => {
                    if (!valid) return false

                    let formLabelAlign = this.formLabelAlign
                    let params = {
                        email: formLabelAlign.email,
                        password: formLabelAlign.password,
                        image_text: formLabelAlign.image_text,
                        image_uuid: this.image_uuid,
                    }

                    this.$store.dispatch('user/login', params)
                        .then(res => {
                            let msg = res.msg
                            if (Number(res.code) === 0) {
                                this.$store.dispatch('user/getMenuInfo')

                                if(!formUrl || formUrl=='/login')formUrl = '/article'
                                this.$Alert({
                                    message: msg,
                                    type: 'success',
                                    callback:()=>this.$router.push(formUrl)
                                })
                            } else {
                                this.errTip(res.msg)
                                this.getImgCode()
                            }
                        })
                });
            },
            // 错误提示
            errTip(msg){
                let formErr = this.formErr
                for(let key in formErr){
                    this.formErr[key] = ''
                }

                if (/邮箱/.test(msg))return formErr.emailErr = msg


                if (/验证码/.test(msg))return this.formErr.codeErr = msg

                this.formErr.userErr = msg
            },
            initData(){
                let formErr = this.formErr
                let formLabelAlign = this.formLabelAlign

                for(let key in formErr)formErr[key] = ''
                for(let key in formLabelAlign)formLabelAlign[key] = ''
            },
        },
    }
</script>

<style scoped lang="less">
    .login{
        .title{
            color: #5c5451;
            font-size: 24px;
            font-weight: 700;
        }

        .el-form{
            width: 50%;
            margin: auto;
        }

        .go{
            width: 50%;
            margin: auto;
            color:#409EFF;
            font-size: 16px;
            i{
                margin-left: 5px;
            }
        }

        .code_image {
            height: 30px;
            cursor: pointer;
        }
    }

    @media screen and (max-width: 900px){
        .login{
            .el-form{
                width: 95%;
            }
            .go{
                width: 95%;
            }
        }
    }
</style>
